<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  手机号：<input type="text" id="phone">
  <button id="btn">查询</button>
  <br>
  <ul>
    <!-- <li>手机号：<span></span></li>
    <li>运营商：<span></span></li>
    <li>归属地: <span></span></li>
    <li>邮编：<span></span></li> -->
  </ul>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    $("#btn").click(function () {
      // 接口文档  调取手机号各种信息
      // 请求地址： https://api.asilu.com/phone
      // 请求方式： get
      // 发送的数据：
      // phone 手机号
      // 返回的数据
      // areacode: 区号
      // city: 城市
      // phone: 手机号
      // postcode: 邮编
      // province: 省份
      // sp: 运营商

      //   $.ajax({
      //     url: "https://api.asilu.com/phone",
      //     type: "get",
      //     dataType: "jsonp",//jq提供的jsonp调取数据
      //     data: {
      //       phone: $("#phone").val()
      //     },
      //     success: function (res) {
      //       console.log(res)
      //       var str = `   <li>手机号：<span>${res.phone}</span></li>
      //           <li>运营商：<span>${res.sp}</span></li>
      //           <li>归属地: <span>${res.province} ${res.city}</span></li>
      //           <li>邮编：<span>${res.postcode}</span></li>`
      //       $("ul").html(str)
      //     }
      //   })

    })




  </script>
</body>

</html>